<template>
  <div class="container">
    <navbar class="de-navbar" :vaniconL="true" :noRight="true" :noLeft="false" :vaniconR="true" iconNameL="arrow-left" iconNameR="flag-o" @clickLeft="$router.go(-1)" >
      合作详情
    </navbar>

    <div style="height: 0.45rem"></div>

    <el-card class="box-card">
      <div slot="header" class="header">
        <span class="success">{{ detail.title }}</span>
      </div>
      <div class="desc">
        <div class="title">简介：</div>
        <p class="content">{{ detail.introduction }}</p>
      </div>
      <div class="desc">
        <div class="title">项目说明：</div>
        <p class="content">{{ detail.content }}</p>
      </div>
      <div class="desc">
        <div class="title">方案要求：</div>
        <p class="content">{{ detail.skilled }}</p>
      </div>
      <van-button type="info" v-if="detail.status === 0" block @click="$router.push({ path: '/AIPartTime_contact', query: { projectId } })">我要合作</van-button>
    </el-card>
  </div>
</template>

<script>
import { get_project_invited_details } from '@/api/AIPartTime'
import navbar from "@/components/navbar"

export default {
  components: {
    navbar
  },
  data() {
    return {
      projectId: this.$route.query.projectId,
      detail: {}
    }
  },
  mounted() {
    this.getDetail()
  },
  methods: {
    getDetail() {
      this.$toast.loading({
        duration: 0,
        forbidClick: true,
        message: "加载中..."
      })
      const { projectId } = this
      const { id: userId } = JSON.parse(sessionStorage.getItem("userInfo"))
      get_project_invited_details({ projectId, userId }).then(res => {
        if (res.data.status === 200) {
          this.detail = res.data.info
        }
      }).finally(() => {
        this.$toast.clear()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.success {
  color: #67C23A;
}
.container {
  position: relative;
  height: 100%;
  background: #f5f5f5;
  text-align: center;
  .de-navbar {
    width: 100%;
    height: 0.45rem;
    position: fixed;
    top: 0;
    z-index: 10;
    background: #4775d9;
    background-image: linear-gradient(211deg, #5d5cbf 0%, #4775d9 100%);
    color: #fff;
  }
  .box-card {
    width: 95%;
    display: inline-block;
    margin-top: 0.15rem;
    border-radius: 8px;
    .header {
      text-align: center;
    }
    /deep/ .el-card__body {
      padding-top: .133333rem;
      text-align: left;
      min-height: .666667rem;
    }
    .desc {
      .title {
        margin: .133333rem 0;
      }
      .content {
        line-height: .266667rem;
        font-size: 15px;
        text-indent: 32px;
      }
    }
    .van-button {
      margin-top: .266667rem;
      border-radius: 8px;
    }
  }
}
</style>